<template>
    <ul class="bottom">
        <li>
            <router-link to="/waimai-view">
                <p class="daohangp"><img src="src/assets/img/buttom-waimai/shouye1.webp" alt=""></p>
                首页
            </router-link>
        </li>
        <li>
            <router-link to="/vip-view">
                <p class="daohangp"><img src="src/assets/img/buttom-waimai/huiyuan1.webp" alt=""></p>
                会员
            </router-link>
        </li>
        <li>
            <router-link to="/order-view">
                <p class="daohangp"><img src="src/assets/img/buttom-waimai/dingdan1.webp" alt=""></p>
                订单
            </router-link>
        </li>
        <li>
            <p class="daohangp"><img src="src/assets/img/buttom-waimai/gengduo1.webp" alt=""></p>
            <p @click="showAll = !showAll" class="show-more">{{word}}</p>
        </li>
        <p class="hello">
        <p v-for='item in showList' class="showListp">
        <div class="showLists">{{item}}</div>
        </p>
        </p>
    </ul>

</template>

<script>

    export default {
        name: "BottomWch",
        data() {
            return {
                toLearnList: [
                    '红包', '代金券', '津贴', '我的收藏', '企业用餐', '发票助手', '管理地址'
                ],
                showAll: false,
            }

        },
        computed: {
            showList: function () {
                if (this.showAll == false) {          //当数据不需要完全显示的时候
                    var showList = [];　　　　　　　　　　　　　　　 //定义一个空数组
                    if (this.toLearnList.length > 0) {　　　　　　　//这里我们先显示前三个
                        for (var i = 0; i > 0; i--) {
                            showList.push(this.toLearnList[i])
                        }
                    } else {
                        showList = this.toLearnList
                    }
                    return showList;　　　　　　　　　　　　　　 //返回当前数组
                } else {
                    return this.toLearnList;
                }
            }
            ,
            word: function () {
                if (this.showAll == false) {　　　　　　　　　　　//对文字进行处理
                    return '更多'
                } else {
                    return '收起'
                }
            }
        }
    }
</script>

<style>
    .bottom {
        display: flex;
        justify-content: space-around;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100vw;
        z-index: 1;
        background-color: #ffffff;
    }

    a.router-link-active {
        color: black;
    }

    a {
        text-decoration: none;
        color: #727272;
    }

    .daohangp {
        text-align: center;
        height: 10px;
        color: #727272
    }

    img {
        width: 25px;
    }

    .hello {
        width: 84px;
        height: 248px;
        position: fixed;
        bottom: 76px;
        z-index: 4;
        text-align: center;
        right: 0
    }

    .show-more {
        text-align: center;
        right: 29px;
        bottom: -16px;
        z-index: 3;
    }

    .showLists {
        height: 35px;
        width: 80px;
        margin: 0 2px;
        line-height: 35px;
    }

    .showListp {
        margin: 0 auto;
        background-color: white;
        border: 1px solid #d4d4d4;

    }
</style>
